<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>出入库管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .input1 {
            margin-left: 5px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    出入库单号：
    <el-input v-model="ioNo" placeholder="请输入出入库单号" class="input1" style="width: 10%"></el-input>
    批次：
    <el-input v-model="batch" placeholder="请输入批次" class="input1" style="width: 10%"></el-input>
    <el-button type="success" plain @click="selectOne">搜索</el-button>
    <br>
    <el-button type="success" @click="dialogFormVisible = true">出库添加</el-button>
    <el-button type="success" @click="outerVisible = true">入库添加</el-button>
    <!--添加出库单对话框-->
    <el-dialog title="添加出库单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="出入库单号" :label-width="formLabelWidth">
                <el-input v-model="form.ioNo" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="出入库类型" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="form.ioType" placeholder="请选择出入库类型">
                        <el-option
                                v-for="item in type"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="批次" :label-width="formLabelWidth">
                <el-input v-model="form.batch" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="form.pname" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="产品数量" :label-width="formLabelWidth">
                <el-input v-model="form.pnum" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="仓库名称" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="form.wname" placeholder="请选择仓库名称">
                        <el-option
                                v-for="item in wname"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveiao">确 定</el-button>
        </div>
    </el-dialog>
    <el-table
            :data="iaos"
            style="width: 100%">
        <el-table-column
                label="编号"
        >
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="出\入库单号"
        >
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.ioNo }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="出入库类型"
        >
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.ioType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="批次"
                width="180">
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.batch }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                width="180">
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品数量"
                width="180">
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.pnum }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="仓库名称"
                width="180">
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.wname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="出\入库时间"
                width="180">
            <template slot-scope="iaos">
                <span style="margin-left: 10px">{{ iaos.row.ioTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-s-help"
                        @click="handleDetails(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curr"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog title="出入库信息" :visible.sync="dialogTableVisible">
        <el-table
                :data="iao"
                style="width: 100%">
            <el-table-column
                    label="编号"
            >
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品码"
            >
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomGoodsno }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
            >
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomGoods }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入库库名"
                    width="180">
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入库区域"
                    width="180">
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomArea }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入库货架"
                    width="180">
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomShelves }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入库货位"
                    width="180">
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomCargoloca }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="入库时间"
                    width="180">
                <template slot-scope="iao">
                    <span style="margin-left: 10px">{{ iao.row.iomTime }}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog title="入库添加" :visible.sync="outerVisible">
        <!--&lt;!&ndash;上面的小表单&ndash;&gt;
        <el-form :model="form">
            <el-form-item label="出入库单号" :label-width="formLabelWidth">
                <el-input v-model="form.ioNo" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="出入库类型" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="form.ioType" placeholder="请选择出入库类型">
                        <el-option
                                v-for="item in type"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="批次：" :label-width="formLabelWidth">
                <el-input v-model="form.batch" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="入库时间" :label-width="formLabelWidth">
                <el-input v-model="form.ioTime" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>-->

        <!--下面的表格-->
        <el-table
                :data="products"
                style="width: 100%">
            <el-table-column
                    label="产品码"
            >
                <template slot-scope="product">
                    <span style="margin-left: 10px">{{ product.row.pnumber }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
            >
                <template slot-scope="product">
                    <span style="margin-left: 10px">{{ product.row.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="280">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            icon="el-icon-s-help"
                            @click="innerDetails(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
            <el-dialog
                    width="30%"
                    title="商品"
                    :visible.sync="innerVisible"
                    append-to-body>
                <el-form :model="product">
                    <el-form-item label="出入库单号" :label-width="formLabelWidth">
                        <el-input v-model="product.ioNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出入库类型" :label-width="formLabelWidth">
                        <template>
                            <el-select v-model="product.ioType" placeholder="请选择出入库类型">
                                <el-option
                                        v-for="item in type"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="批次" :label-width="formLabelWidth">
                        <el-input v-model="product.batch" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="产品名称" :label-width="formLabelWidth">
                        <el-input v-model="product.pName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="产品数量" :label-width="formLabelWidth">
                        <el-input v-model="product.pNumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库名称" :label-width="formLabelWidth">
                            <el-select v-model="product.WName" placeholder="请选择出入库类型" @change="changeWname">
                                <el-option
                                        v-for="item in name"
                                        :key="item.wareNO"
                                        :label="item.wareName"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item label="货架编号" :label-width="formLabelWidth">
                        <el-select v-model="product.Shelves" placeholder="请选择出入库类型" @change="changeShelves">
                            <el-option
                                    v-for="item in shelvesNos"
                                    :key="item.id"
                                    :label="item.shelvesNo"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="货位编号" :label-width="formLabelWidth">
                        <el-select v-model="product.Cargo" placeholder="请选择出入库类型">
                            <el-option
                                    v-for="item in cargo"
                                    :key="item.id"
                                    :label="item.cargoNo"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveIN">确 定</el-button>
                </div>
            </el-dialog>
        </el-table>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                iaos: null,
                dialogFormVisible: false,
                dialogTableVisible: false,
                outerVisible: false,
                innerVisible:false,
                curr: 1,
                total: 0,
                pageSize: 5,
                //下拉框数据定义
                WName:'',
                name: [],
                Shelves: '',
                shelvesNos: [],
                Cargo: '',
                cargo: [],
                ioNo: '',
                batch: '',
                iao: null,
                //出入库类型
                type: [],
                //仓库名称
                wname: [],
                form: {
                    id: '',
                    ioNo: '',
                    ioType: '',
                    batch: '',
                    pname: '',
                    pnum: '',
                    wname: '',
                    ioTime: ''
                },
                products: null,
                product:{
                    id:'',
                    pNumber:'',
                    pName:'',
                    WName:'',
                    Shelves:'',
                    Cargo:'',
                    ioNo:'',
                    ioType:'',
                    batch:''
                },
                formLabelWidth: '120px'//表单标签的宽度
            }
        },
        methods: {
            selectOne() {
                if(this.ioNo==''&&this.batch==''){
                    this.loadPage(1,5);
                }else{
                    axios.get("/select/" + this.ioNo + "/" + this.batch).then(value => {
                        if (value.data.code == 1) {
                        this.iaos = value.data.data;
                    }
                })
                }
            },
            handleSizeChange(pageSize) {
                console.log(`每页 ${pageSize} 条`);
                this.loadPage(this.curr, pageSize);
            },
            handleCurrentChange(curr) {
                console.log(`当前页: ${curr}`);
                this.loadPage(curr, this.pageSize);
            },
            loadPage(curr, pageSize) {
                this.curr = curr;
                this.pageSize = pageSize;
                axios.get("/iaos?current=" + curr + "&pageSize=" + pageSize).then(value => {
                    if (value.data.code == 1) {
                        this.iaos = value.data.data.records;
                        this.curr = value.data.data.current;
                        this.pageSize = value.data.data.size;
                        this.total = value.data.data.total;
                    }
                })
            },
            handleDetails(index, row) {
                console.log(row.ioNo)
                axios.get("/iaos/" + row.ioNo).then(value => {
                    if (value.data.code == 1) {
                        this.iao = value.data.data;
                    }
                })
                this.dialogTableVisible = true;
            },
            innerDetails(index,row){
                console.log(row.id);
                axios.get("/product/"+row.id).then(value => {
                    this.product = value.data.data[0];
                })
                this.innerVisible = true;
            },
            changeWname(){
                console.log(this.product.WName);
                axios.get("/shelvesNos/"+this.product.WName).then(value => {
                    if (value.data.code == 1){
                        this.shelvesNos = value.data.data;
                    }
                })
            },
            changeShelves(){
                console.log(this.product.Shelves);
                axios.get("/cargoByShelvesId/"+this.product.Shelves).then(value => {
                    if (value.data.code == 1){
                        this.cargo = value.data.data;
                    }
                })
            },
            //添加出入库单号
            saveiao() {
                axios.post("/iaos",
                    {
                        ioNo: this.form.ioNo,
                        ioType: this.form.ioType,
                        batch: this.form.batch,
                        pname: this.form.pname,
                        pnum: this.form.pnum,
                        wname: this.form.wname
                    }
                ).then(value => {
                    if (value.data.code == 1) {
                        location.reload()
                    }
                });
                this.dialogFormVisible = true;
            },
            //入库添加第一步
            saveIN(){
                axios.post("/saveIN",{
                    ioNo:this.product.ioNo,
                    ioType:this.product.ioType,
                    batch:this.product.batch,
                    pname: this.product.pName,
                    pnum: this.product.pNumber,
                    wname:this.product.WName
                }).then(value => {
                    if (value.data.code == 1){
                        location.reload()
                    }
                })
            }
        },
        mounted() {
            //页面加载成功回调
            this.loadPage(1, 5);
            /*axios.get("/iaos").then(value => {
                if (value.data.code == 1){
                    this.iaos = value.data.data;
                    console.log(value.data.data)
                }
            })*/
            //去查询出入库类型
            axios.get("/ioTypes").then(value => {
                console.log(value.data.data)
                this.type = value.data.data;
            })
            //查询仓库名称
            axios.get("/wName").then(value => {
                this.wname = value.data.data;
            })
            //查询所有的商品
            axios.get("/orderProduct").then(value => {
                if (value.data.code == 1) {
                    this.products = value.data.data;
                }
            }),
                //查询仓库名称
                axios.get("/WName").then(value => {
                    this.name = value.data.data;
                })
        }
    })
</script>
</body>
</html>